import React, { useEffect, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import * as service from '../../../api/Statistics'
import './Style/DataEducation.scss'
import { DatePicker, Space, Table, Button, Select,Card } from 'antd';
import { Pie } from '@ant-design/plots';
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { RangePicker } = DatePicker;

function StatEducation(props:Props) {
    const [educatelist, setEducatelist] = useState([])
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [data, setData] = useState([])

    useEffect(() => {
        setLoading(true);
        // 学历列表
        service.educate_list().then((res) => {
            console.log(res);
            setEducatelist(res.data.data)
            setData(res.data.data)
            setLoading(false);
        })
        // 机构下拉表
        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.mechanismName, label: item.mechanismName }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.teamName, label: item.teamName }
            })
            setListertwo(arr)
        })

        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.doctorName, label: item.doctorName }
            })
            setListerthree(arr)
        })
    }, [])
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };





    const columns = [
        {
            title: '序号',
            // dataIndex: 'key',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,
            key: 'key',
        },
        {
            title: '学历',
            dataIndex: 'education',
            key: 'education',
        },
        {
            title: '人次',
            dataIndex: 'population',
            key: 'population',
        },
        {
            title: '比例',
            // dataIndex: 'proportional',
            key: 'prc',
            render: (_: any, record: any) => Number(record.prc * 100).toFixed(2)+'%'
        }
    ]

    
    const config = {
        // legend:false,
        appendPadding: 10,
        data,
        angleField: 'population',
        colorField: 'education',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            // title:false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                // content: '居民学历统计',
            },
        },
    };
    const handle = () => {
        // console.log(value);
        service.educationDataSearch({ }).then((res) => {
            console.log(res)
            setData(res.data.data)
            setEducatelist(res.data.data)

        })
    };
    let excel = () => {//导出Excel表
        let sheetFilter = ["key", "education", 'population', 'prc', ]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "居民列表";
        option.datas = [
            {
                sheetData: educatelist,//需要导出的数据
                sheetName: "居民学历",
                sheetFilter: sheetFilter,
                sheetHeader: ["序号", "学历", "人数", "比例", ],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
    }
    return (
        <div className='data-education' style={{ padding: 20 }}>
            <div className='title'>居民学历统计</div>
            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerone
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listertwo
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerthree
                        }
                    />
                </div>
                <Button type="primary" icon={<SearchOutlined />} onClick={() => { handle()}}>
                    搜索
                </Button>

            </div>
            <div style={{ padding: "0 100px" }}>
            <Card title="居民学历构成">
                <Pie {...config} />
            </Card>
            </div>
            
            <Button  onClick={() => { excel() }} style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={educatelist} loading={loading}
            />

        </div>
    );
}
export default StatEducation;